<template>
	<div>
		<van-nav-bar :title="shopName" left-text="返回" right-text="发布" left-arrow @click-left="onClickLeft"
			@click-right="onClickRight" />

		<van-cell-group inset><br />
			<van-button round block><span style="color:red">评价100字+3张图，最高可获100抵现积分</span></van-button>
			<van-cell-group inset>
				<br />
				<van-rate v-model="entity.evaluationScore" :size="60" color="#ffd21e" icon="star" void-icon="star"
					void-color="#eee" />


				<van-field v-model="entity.evaluationoDescription" rows="6" autosize label="评价内容" type="textarea"
					maxlength="100" placeholder="请输入留言" show-word-limit />
			</van-cell-group>
			<!-- <van-field v-model="evaluationoDescription" label="评价内容" placeholder="请输入评价内容" /> -->



			<p>评论15字，有机会获得抵现积分</p>
			<el-upload class="avatar-uploader" action="/evaluation/upload" :data="{'userId':this.entity.userId}"
				:show-file-list="false" :on-success="handleFileSuccess" style="display: inline-block;width: 300px">
				<!-- <el-button v-model="ruleForm.dishesPhotoOrVideoUrl">上传图片</el-button> -->
				<img v-if="entity.videoOrImageUrlOfTheReview" width="300" height="300" :src="entity.videoOrImageUrlOfTheReview" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon">
					<!-- 显示头像 -->
					<el-row class="demo-avatar demo-basic">
						<el-col :span="12">
							<div class="demo-basic--circle">
								<div class="block">
									<!-- 头像路径 -->
									<el-avatar shape="square" :size="100" :src="entity.videoOrImageUrlOfTheReview">
										上传图片
									</el-avatar>
								</div>
							</div>
						</el-col>
					</el-row>
				</i>
			</el-upload>
			<!-- ImagePreview 图片预览 中划线命名-->
			<van-image-preview v-model:show="show" :images="images">预览图片</van-image-preview>
			<!-- 自定义单个图片预览 -->
			<van-uploader v-model="fileList" :deletable="false" />
			<p>匿名评价<van-switch v-model="checked"></van-switch>
			</p>
			<span>选择匿名后，商家或其他用户将无法获取您的个人信息，您将
				无法获得本评价的积分或奖励
			</span>

		</van-cell-group>

		<router-view />
	</div>
</template>
<script>
	import qs from 'qs'
	import {
		Toast,
		Notify,
		ImagePreview
	} from 'vant';
	export default {
		name: "DishesList",
		components: {
			[ImagePreview.Component.name]: ImagePreview.Component,
		},
		data() {
			return {
				entity: {
					userId: 1,
					dishesId: 0,
					videoOrImageUrlOfTheReview: '',
					evaluationScore: 0,
					evaluationoDescription: '',
				},
				shopName: '',
				show: false,
				images: [
					'https://img.yzcdn.cn/vant/apple-1.jpg',
					'https://img.yzcdn.cn/vant/apple-2.jpg',
				],
				checked: false,
			}
		},

		mounted() { //挂载之后执行的方法
			this.getShopName();
		},
		methods: {
			getShopName() {
				this.shopName = this.$route.query.shopName;
			},
			handleFileSuccess(res, file) {
				console.log("res=" + res + ",file=" + file);
				this.$axios.get('/evaluation/url/' + this.entity.userId)
					.then(res => {
						this.entity.videoOrImageUrlOfTheReview = res.result.data;
						console.log("this.entity.videoOrImageUrlOfTheReview="+this.entity.videoOrImageUrlOfTheReview);
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			onClickRight() { //点击发布评价

				// this.entity.userId = this.$route.query.userId;
				// this.entity.dishesId = this.$route.query.dishesId;

				this.$axios.post('/evaluation/insert', qs.stringify(this.entity))
					.then(res => {
						// console.log("data=" + res)
						if (res.result.data) {
							Toast.success('评价成功');
							this.$router.push({
								path:'/ordersList'
							})
							
						} else {
							Toast.fail('评价失败');
							Notify({
								type: 'success',
								message: '通知内容',
								position: 'center',
							});
						}
					}).catch(error => {
						Toast.fail(error);
						Notify({
							type: 'danger',
							message: "error : " + error,
						});
					})
			},
			onClickLeft() {
				history.back()
			},


		}
	}
</script>
<style>
	span {
		/* 上右下左 */
		margin: 10px 0px 0px 10px;
	}

	.dishes-image {
		float: left;
		display: inline-block;
		/* width: 600px; */

	}
</style>
